<template>
  <view class="progress-tab" :style="progressBarStyle">
    <view v-if="progressType==0" class="progress-bar">
      <view class="progress-bar-inner" :style="'width: ' + progress + '%'">
        <text class="progress-text">{{ progressText }}</text>
      </view>
    </view>
    <!-- preferential="立减1.5元" coupon="满200减20" -->
    <view v-if="progressType==1" style="display: flex;justify-content: center;align-items: center;">
      <!-- <view class="preferentialCalss" v-if="preferential"><text style="color: #FF3A3A;font-size: 20rpx;">{{ preferential }}</text></view> -->
      <view class="preferentialCalss" v-if="coupon"><text style="color: #FF3A3A;font-size: 21rpx;">{{ coupon }}</text></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0, // 默认进度为0%
    },
    progressMargin: {
      type: Number,
      default: 8, // 默认进度条边距为16
    },
    progressType: {
      type: Number,
      default: 1
    },
    preferential: {
      type: String,
      default: ''
    },
    coupon: {
      type: String,
      default: ''
    }
  },
  computed: {
    progressBarStyle() {
      return `margin-top: ${this.progressMargin}rpx;`; // 返回字符串形式的样式
    },
    progressText() {
      return this.progress >= 50 ? `库存 ${this.progress}%` : `${this.progress}%`;
    }
  },
};
</script>

<style scoped>
.preferentialCalss {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88rpx;
  height: 28rpx;
  border: 0.5rpx solid #FF3A3A;
  border-radius: 8rpx;
}

.progress-tab {
  margin-left: 16rpx;
  display: flex;
  align-items: center;
  position: relative; /*增加定位属性*/
}

.progress-bar {
  border: 1rpx solid #FF8A3A;
  width: 200rpx;
  height: 32rpx;
  /* background: #f0f0f0; */
  border-radius: 16rpx;
  overflow: hidden;
}

.progress-bar-inner::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #FF8A3A;
  opacity: 0.16;
  transition: width 0.3s ease-in-out;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.progress-bar-inner {
  position: relative;
  height: 100%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FF8A3A;
  font-size: 20rpx;
  width: 100%;
  text-align: center;
}
</style>